<template>
  <div>
    <div class="demo"></div>
    <el-row class="back-head" type="flex" align="middle">
      <router-link :to="{path:'/main/activity/pron'}"><i class="el-icon-arrow-left"></i>返回</router-link>
      <span class="primary">创建下单返红包</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="right" size="small">
        <el-row class="head" type="flex" align="middle">红包信息</el-row>
        <div class="item">
          <el-form-item label="选择商家" prop="busid" :rules="[{ required: true, message: '请选择商家', trigger: 'change' }]">
            <el-row type="flex">
              <el-button style="width: 500px;text-align: left" @click="dialogTableVisible = true" placeholder="点击右边按钮选择商家">
                {{params.busname?params.busname:'选择商家'}}
              </el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>
          <el-form-item label="数量限制" required style="margin-bottom: 0">
            <el-row type="flex">
              <span style="margin-right: 5px;">限</span>
              <el-select style="" v-model="params.redlimittype" placeholder="请选择">
                <el-option label="每天数量" value="0" />
                <el-option label="总数量" value="1" />
              </el-select>
              <span> ，</span>
              <el-form-item prop="rednum" :rules="[{ required: true, message: '请输入金额' },]">
                <el-input-number style="margin: 0 5px;"   v-model="params.rednum" :min='1' :max='9999999' :precision='0' />
              </el-form-item>
              <span style="margin-left: 5px;">个</span>
            </el-row>
          </el-form-item>
          <el-form-item label="领取限制" required>
            <el-select v-model="params.redpersonlimittype" placeholder="请选择">
              <el-option label="每人1张" value="0" />
              <el-option label="每人每天1张" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="红包金额" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-select v-model="diyPrice" placeholder="请选择">
                <el-option label="固定金额" value="1" />
                <el-option label="随机金额" value="2" />
              </el-select>
              <span style="margin:0 5px;">,</span>
              <el-form-item prop="randomMin" v-if="diyPrice ==1" :rules="[{ required: true, message: '请输入金额'}]">
                <el-input-number :min='0' :max='9999999' :precision='2' v-model="params.randomMin" /> {{comConfig.unit}}
              </el-form-item>
              <el-row type="flex" v-if="diyPrice ==2">
                <span style="margin:0 5px;">随机金额最少</span>
                <el-form-item prop="randomMin" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMin" :min='0' :max='params.randomMax?params.randomMax:"9999"' :precision='2' />
                </el-form-item>
                <span style="margin:0 5px;">{{comConfig.unit}},最多</span>
                <el-form-item prop="randomMax" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMax" :min='params.randomMin?params.randomMin:0' :max='9999' :precision='2' />
                </el-form-item>
                <span style="margin-left:5px;">{{comConfig.unit}}</span>
              </el-row>
            </el-row>
          </el-form-item>
          <el-form-item prop='redvalidday' label='红包有效期' :rules="[{ required: true, message: '请输入天数'}]">
            <el-input-number style="margin: 0 5px;" :min='1' :max='9999' :precision='0' v-model="params.redvalidday" /> 天
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">红包生效配置</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请起止日期', trigger: 'blur' }]">
            <pt-date-picker style="width: 300px" v-model="params.startTimeToendTime" :disabledDate=" time => time.getTime() <= (Date.now() - 3600 * 1000 * 24)" />
          </el-form-item>
          <el-form-item label="使用条件" prop="fulls" :rules="[{ required: true, message: '请输入金额' }]">
            消费满<el-input-number style="margin: 0 5px;" v-model="params.fulls" :min='0' :max='9999' :precision='2' /> 可使用
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">赠送方式</el-row>
        <div class="item">
          <el-form-item label="赠送方式" required style="margin-bottom: 0;">
            <el-row type="flex">
              <el-select v-model="giveWayTo" placeholder="请选择" style="margin-right:5px; ">
                <el-option label="下单即赠" value="1" />
                <el-option label="满消费赠送" value="2" />
              </el-select>
              <el-form-item v-if="giveWayTo == '2'" prop="fullreturn" :rules="[{ required: true, message: '请输入金额' }]">
                ，消费满<el-input-number style="margin: 0 5px;" v-model="params.fullreturn" :min='0' :max='9999' :precision='2' />即赠
              </el-form-item>
            </el-row>
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">同享设置</el-row>
        <div class="item">
          <el-form-item label="是否同享" prop="name">
            <el-switch v-model="params.shared" />
          </el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="选择商家" v-dialogDrag :visible.sync="dialogTableVisible" width="800px" :close-on-press-escap="true">
      <shop-list v-on:listenToShop="getShopData" />
    </el-dialog>
  </div>
</template>
<script>
  import shopList from '@/components/dialog/shopList'
  export default {
    components: { shopList },
    data() {
      return {
        dialogTableVisible: false, //选择商家
        busniessMsg: [], //选中的商家信息
        diyPrice: '1', //红包金额方式
        giveWayTo: '1', //红包金额方式
        params: {
          busname: '', //商家名称
          busid: '', //商家id
          name: '', //活动名称
          ptype: '11', //商户红包
          redlimittype: '0', //数量限制方式
          redamount:undefined, //限制红包数量
          redpersonlimittype: '0', //领取限制
          randomMin:undefined, //固定金额
          randomMax:undefined, //固定金额
          redvalidday:undefined, //红包有效天数
          fulls: undefined, //满返红包
          fullreturn:undefined, //赠送条件
          startTimeToendTime: '', //起止时间
          shared: false //是否同享受
        },
      }
    },
    methods: {
      getShopData(data) {
        this.params.busname = data.name
        this.params.busid = data.id
        this.dialogTableVisible = false
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.diyPrice == '1') {
              params.redamount = params.randomMin
            } else if (this.diyPrice == '2') {
              params.redamount = `${params.randomMin},${params.randomMax}`
            }
            if (this.giveWayTo == '1') {
              params.fullreturn = ''
            }
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            delete params.randomMin
            delete params.randomMax
            this.issubmitLoading = true
            this.$http.post('/server/activity/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '添加下单返红包活动成功'})
                this.$router.push({path: '/main/activity/pron'})
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入或未填写的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      backPath() {
        this.$router.replace({path: '/main/activity/pron'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-orderbox;
  }
  .main .head {
    background: $c-active-orderbox;
  }
  @import './css/actives.scss';
</style>
